<template>
	<view class="title_text_com">
		<u-gap height="8"></u-gap>
		<view class="body">
			<view class="title">
				<view class="title_left">
					<text class="main u-line-1">{{ textData.title }}</text>
				</view>
				<view v-if="textData.isOpenMore === 1"  class="title_right" @click="itemTo(textData)">
					<text>{{ $t('locales.seeMore') }}</text>
					<u-icon name="arrow-right" color="#777" size="20"></u-icon>
				</view>
			</view>
			<view v-if="textData.subTitle !== ''" :style="textData.alignment === 1 ? 'text-align: left;' : 'text-align: center;'" class="minor u-line-1">{{ textData.subTitle }}</view>
			<view v-else style="height: 15rpx;"></view>
			<view class="contes" :style="textData.alignment === 1 ? 'text-align: left;' : 'text-align: center;'">{{ textData.content }}</view>
		</view>
		<u-gap height="8"></u-gap>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: Array,
			default: () => []
		},
		modelType: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {
			textData: {}
		}
	},
	watch: {
		value(val) {
			if (val[0]) {
				this.textData = val[0]
			}
		}
	},
	methods: {
		itemTo(row) {
			const data = {
				...row,
				modelType: this.modelType,
			}
			this.$store.commit('VIEW_SWITCH', data)
		}
	}
}
</script>

<style lang="scss" scoped>
.title_text_com {
	margin: 0 24rpx;
	.body {
		border-radius: 16rpx;
		background-color: #fff;
		.title {
			padding: 20rpx 20rpx 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.main {
				display: inline-block;
				width: 470rpx;
				font-size: 32rpx;
				line-height: 40rpx;
			}
			
			.title_right {
				font-size: 24rpx;
				color: #777;
			}
		}
		.minor {
			font-size: 26rpx;
			line-height: 40rpx;
			width: 600rpx;
			display: inline-block;
			color: #de3d2b;
			display: inline-block;
			margin-left: 15rpx;
		}
		.contes {
			padding: 20rpx;
			padding-top: 0;
			font-size: 24rpx;
			color: #444;
		}
	}
}
</style>
